---
category: React
created: '2023-09-03'
description: The differences between React.createElement() and JSX
openGraphCover: /og/this-vs-that/react-create-element-vs-jsx.png
title: React.createElement() vs JSX
---

When it comes to creating React components, there are two different approaches: JSX and `React.createElement()`. In this post, we'll explore the differences between the two. Let's dive in.

## Syntax

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code directly in their JavaScript files. It's a more concise way of creating React elements than using `React.createElement()`.

One of the key differences between JSX and `React.createElement()` is that JSX lets you write your HTML-like code directly in your JavaScript file. On the other hand, with `React.createElement()`, you need to pass the element type, props, and children as separate arguments.

To give you an example, here's how you can use JSX to create a new React element:

```jsx
const element = <div className="my-class">Hello World!</div>;
```

And here's the equivalent code using `React.createElement()`:

```jsx
const element = React.createElement('div', { className: 'my-class' }, 'Hello World!');
```

When using React.createElement, you need to provide three parameters.

First, you need to specify the type of element you want to create. This can be an HTML tag like `div`, `span`, or `p`. Alternatively, you can use a reference to a React component like `MyComponent`, or even a functional component like `() => <div>Hello World!</div>`.

The second parameter is where you can pass any properties, or __props__, to the element. You do this by passing an object containing the properties you want to set, like `{className: 'my-class', onClick: () => console.log('clicked')}`.

Finally, the last parameter is where you specify the element's children. This can be any valid JavaScript expression, including other React elements.

## Including JavaScript expressions

One cool thing about JSX is that it allows you to include JavaScript expressions inside your HTML-like code using curly braces `{}`. This makes it easy to work with data from APIs or user input and create dynamic content.

For instance, let's say you have a variable called `name` that stores the user's name. You can use JSX to create a personalized greeting like this:

```jsx
const greeting = <h1>Hello, {name}!</h1>;
```

This code will display a personalized greeting, such as `<h1>Hello, John!</h1>`, if the user's name is John.

However, if we were to use `React.createElement()`, we would have to create individual variables for every aspect of the greeting.

```jsx
const helloElement = React.createElement('h1', null, 'Hello, ');
const nameElement = React.createElement('span', null, name);
const exclamationElement = React.createElement('span', null, '!');
const greeting = React.createElement('div', null, helloElement, nameElement, exclamationElement);
```

As you can see, using JSX can make our code more concise and easier to read. However, some developers prefer using `React.createElement()` because it is more explicit and closer to standard JavaScript syntax. It's really a matter of personal preference and what works best for your project.
